<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> 
<title>别踩白块</title>
</head>
<style>
    .wrap{width:100%;max-width: 750px;height:12.6rem;max-height:800px;overflow: hidden;position: absolute;top: 1rem;left: 50%;transform:translateX(-50%);border-top: 1px solid #000;border-bottom: 1px solid #000;}
    .main{width:100%;height:100%;position: relative; top:-1px;}
    .row{width:100%;height:150px;}
    .row div{width:25%;height:150px;box-sizing:border-box;border-left:1px solid #000;border-bottom:1px solid #000;float:left;}
    .row div:last-child{border-right:1px solid #000;}
    .sbtn{position: absolute;top:40%;width: 100%;}
    .sbtn button{text-align: center;font-size:.4rem;color: blue;font-weight: bold;    padding: 5px 10px;position: absolute;left: 0; right: 0;margin: 0 auto;width:3.5rem;}
    .score{    position: fixed;top: 10px;right: 10px;color: red;font-size: .3rem;} 
</style>
<body>
    <div class="wrap">
        <div class="main"></div>
        <div class="sbtn"><button>start game</button></div> 
    </div>
    <div class="score">score:0</div>
</body>
</html>
<script> 
    var timer,game=true,speed=2,num=0;
    var main=document.querySelector('.main'); 
    var color=['red','blue','green','pink'];
    function cDiv(){ 
        var rDiv=document.createElement('div');
        rDiv.setAttribute('class','row');
        for(var i=0;i<4;i++){
            var mDiv=document.createElement('div');
            rDiv.appendChild(mDiv);
        }
        var index=parseInt(Math.floor(Math.random()*4));

        rDiv.childNodes[index].style.background=color[index];
        rDiv.childNodes[index].setAttribute('class','c');
        if(main.childNodes.length>0){
            main.insertBefore(rDiv,main.childNodes[0])
        }else{
            main.appendChild(rDiv); 
        }
        
    }
    function move(){ 
        timer=setInterval(function(){ 
            if(main.offsetTop>0){
                cDiv(); 
                main.style.top='-150px';
            }else{
                var step=parseInt(main.offsetTop)+speed; 
                main.style.top=step+'px';
            }  
            var len=main.childNodes.length;
            if(len>5){
                for(var i=0;i<4;i++){
                    if(main.childNodes[len-1].children[i].classList.contains('c')){
                        alert('game over,score:'+num);
                        clearInterval(timer);
                        game=false;
                        return false;
                        
                    }
                }
               
            }  
            if(len>8){
                main.removeChild(main.childNodes[len-1]);
            }
        },20) 
        binadEvent();
    }
    function binadEvent(){ 
        main.addEventListener('click',function(e){
            if(game){
                var target=e.target;
                if(target.classList.contains('c')){
                    target.classList.remove('c');
                    target.style.background='#ababab';
                    num++;
                    document.querySelector('.score').innerHTML='score:'+num;
                    if(num%20==0){
                        speed+=3;
                    }
                }else{
                    alert('game over,score:'+num);
                    clearInterval(timer);
                    game=false;
                    return false; 
                }
            }
        }) 
    }

    function start_game(){
        document.querySelector('.sbtn button').addEventListener('click',function(){
            document.querySelector('.sbtn').style.display='none';
            move();
        }) 
    }  
    start_game();
    new function (){
    var _self = this;
    _self.width =750;//设置UI提供的基准尺寸
    _self.fontSize = 100;//默认字体大小，使用时除以此参数(1rem=100px)。为保证谷歌良好适配，320/_self.width*_self.fontSize>12
    _self.widthProportion = function(){
    var p = (document.body&&
      document.body.clientWidth ||
      document.getElementsByTagName("html")[0].offsetWidth)/_self.width;
	  
      return p>1.024?1.024:(p<0.42?0.42:p);  //设置安全尺寸最宽768px,最小320px
    };
	console.log(_self.widthProportion());
    _self.changePage = function(){
        document.getElementsByTagName("html")[0].setAttribute("style","font-size:"+_self.widthProportion()*_self.fontSize+"px !important");
    }
    _self.changePage();
    window.addEventListener("resize",function(){_self.changePage();},false);
    };  
</script>